<template>
  <i :class="[iconClassNames, isSpin]" />
</template>

<script>
export default {
  name: 'CustomIcon',
  props: {
    iconType: {
      type: String,
      default: () => ''
    },
    spin: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  computed: {
    iconClassNames() {
      if (this.iconType.includes('el-icon')) {
        return this.iconType;
      } else {
        return `icon iconfont ${this.iconType}`;
      }
    },
    isSpin() {
      return this.spin && !this.rotate ? 'spin-icon' : '';
    }
  }
};
</script>

<style scoped>
  @import url(./iconfont/iconfont.css);
  .spin-icon{
    display: inline-block;
    animation: spin 1s infinite linear;
  }
  @keyframes spin {
    from{
      transform: rotateZ(0deg);
    }
    to{
      transform: rotateZ(360deg);
    }
  }
</style>
